<template>
  <div class="chat-detail">
    <el-header class="detail-header">
      <el-avatar :size="40" :src="user.avatar" />
      <span class="user-name">{{ user.name }}</span>
    </el-header>
    <div class="chat-content" ref="chatContentRef">
      <div v-for="msg in messages" :key="msg.id" :class="['msg-row', msg.isSelf ? 'self' : 'other']">
        <el-avatar
          v-if="msg.isSelf"
          :size="32"
          :src="getImageUrl('avator.png')"
          class="msg-avatar"
        />
        <el-avatar
          v-else
          :size="32"
          :src="user.avatar"
          class="msg-avatar"
        />
        <div class="msg-bubble">{{ msg.text }}</div>
      </div>
    </div>
    <div class="chat-input-bar">
      <el-input
        v-model="inputMsg"
        placeholder="请输入消息..."
        @keyup.enter="sendMsg"
        class="chat-input"
        clearable
      />
      <el-button type="primary" @click="sendMsg">发送</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
const getImageUrl = (name) => {
  return new URL(`../../assets/imgs/home/${name}`, import.meta.url).href
}
const props = defineProps({
  user: { type: Object, required: true },
  messages: { type: Array, required: true }
})
const emit = defineEmits(['send-msg'])
const inputMsg = ref('')
const chatContentRef = ref(null)

function sendMsg() {
  const text = inputMsg.value.trim()
  if (!text) return
  emit('send-msg', { userId: props.user.id, text })
  inputMsg.value = ''
  nextTick(() => {
    if (chatContentRef.value) {
      chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight
    }
  })
}

watch(() => props.messages, () => {
  nextTick(() => {
    if (chatContentRef.value) {
      chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight
    }
  })
}, { deep: true })
</script>

<style lang="scss" scoped>
.chat-detail {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
margin-right: 250px;
  .detail-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 20px;
    height: 60px;
    background: #fff;
    .user-name {
      margin-left: 15px;
      font-weight: bold;
      font-size: 18px;
    }
  }
  .chat-content {
    flex: 1;
    padding: 20px 16px 10px 16px;
    background: #f7f7f7;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .msg-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
    &.self {
      flex-direction: row-reverse;
      .msg-bubble {
        background: #95ec69;
        color: #222;
        margin-right: 8px;
        margin-left: 0;
      }
    }
    &.other {
      .msg-bubble {
        background: #fff;
        color: #222;
        margin-left: 8px;
        margin-right: 0;
      }
    }
  }
  .msg-avatar {
    flex-shrink: 0;
  }
  .msg-bubble {
    max-width: 60%;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    word-break: break-all;
  }
  .chat-input-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    .chat-input {
      flex: 1;
      margin-right: 10px;
    }
  }
}
</style> 